import {
    View,
    Text,
    StyleSheet,
    ActivityIndicator,
    TouchableWithoutFeedback,
    Button,
    TouchableOpacity,
    FlatList,
    Image,
    RefreshControl, Animated, ViewStyle
} from 'react-native'
import React, {Component, PureComponent} from 'react'
import PropTypes from 'prop-types'
import {Actions} from 'react-native-router-flux'
import {Svg, Path, Circle} from 'react-native-svg'
import {padding} from "../../style";

let AnimatePath = Animated.createAnimatedComponent(Path);
let AnimateCircle = Animated.createAnimatedComponent(Circle);

interface CommonRadioState {
    checked: boolean,
    strokeDashOffset: Animated.Value,
}

interface CommonRadioProps {
    size: number,
    style?: ViewStyle,
    checked?: boolean,
    onChecked?: (flag: boolean) => void
}

export default class CommonRadio extends Component<CommonRadioProps, CommonRadioState> {

    static defaultProps = {
        size: 16,
        checked: false
    };

    constructor(props) {
        super(props);
        this.state = {
            strokeDashOffset: new Animated.Value(0),
            checked: this.props.checked
        }
    }

    onChecked = () => {
        const checked = !this.state.checked;
        this.setState((preState: CommonRadioState) => ({
            checked
        }));
        this.props.onChecked&&this.props.onChecked(checked);
        requestAnimationFrame(_ => {
            Animated.timing(
                this.state.strokeDashOffset,
                {
                    toValue: this.state.checked ? 0 : 100,
                    duration: 200
                }
            ).start();
        })
    };

    render() {
        const {size, style} = this.props;
        const scale = size / 100;
        return (
            <TouchableWithoutFeedback style={[padding(5, 8), style]} onPress={this.onChecked}>
                <Svg
                    height={size}
                    width={size}
                ><AnimateCircle
                    cx="50"
                    cy="50"
                    r="46"
                    strokeWidth="4"
                    scale={scale}
                    stroke={this.state.checked ? "#629C36" : "#DDDDDD"}
                    fill={this.state.checked ? "#629C36" : "none"}
                />
                    <AnimatePath
                        strokeLinejoin={"round"}
                        strokeLinecap={"round"}
                        d="M25,50 L42,70 L80 30"
                        fill="none"
                        scale={scale}
                        stroke="#fff"
                        strokeWidth="6"
                        strokeDasharray="100"
                        strokeDashoffset={this.state.strokeDashOffset}
                    />
                </Svg>
            </TouchableWithoutFeedback>
        )
    }
}

const style = StyleSheet.create({});